<template>
	<div class="wd_view">
		<van-nav-bar :border="false" title="提现" left-arrow @click-left="onClickLeft" />
		<div class="w_top">

			<img :src="myApp.srcPath('withdrawal-img.png')" />

			<p v-if="WithdrawalData">可提现余额：{{WithdrawalData.user.jifen_wia}}元</p>
			
		</div>

		<div class="w_itemt">
			<p class="wi_title">提现金额</p>

			<div class="wi_itpView">
				<input placeholder="金额" v-model="number" type="number" value="" />
				<p @click="AllTx">全部提现</p>
			</div>
			
			<div class="wi_iptViews">
				<p>开户行 </p>
				<input placeholder="开户行" v-model="openingbank" type="text" value="" />
			</div>
			
			<div class="wi_iptViews">
				<p>银行卡号</p>
				<input placeholder="银行卡号" v-model="bankcard" type="number" value="" />
			</div>


			<!-- <p class="w_sxf">注:请仔细填写有开户银行与银行卡号</p> -->
			<p class="w_sxf">提现手续费{{WithdrawalData.fac_charge}}%</p>
		
		<div class="w_qr" @click="Withdrawal">
			确认提现
		</div>
		<p class="wd_bot">提现后大约两小时内到账</p>
		</div>

		<!-- <div class="w_itemt">
			<p class="wi_title">提现到账</p>

			<div class="wit_view">
				<div  class="wit_left">
					<img :src="myApp.srcPath('yl.png')" alt="">
					<p>银行卡到账</p>
				</div>
				<van-radio-group v-model="radio" icon-size="15px">
				  <van-radio name="1"></van-radio>
				</van-radio-group>
			</div>
		</div> -->
	</div>

</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Toast,
		RadioGroup,
		Radio
	} from 'vant';

	Vue.use(NavBar);
	Vue.use(Radio);
	Vue.use(RadioGroup);
	
	import {WithdrawalInfo,Withdrawal} from '../serve/api.js'

	export default {
		created() {
			
			this.WithdrawalInfo()
			
		},
		data(){
			return{
				//金额
				number:'',
				
				//银行卡号
				bankcard:'',
			
				//开户行
				openingbank:'',
					
				radio:1,
				
				//提现信息
				WithdrawalData:''
					
			}
		},
		
		methods: {
			//全部提现
			AllTx(){
				
				this.number = this.WithdrawalData.user.jifen_wia
			
			},
			
			//确认提现
			Withdrawal(){
				
				if(this.number <= 0){
					
					Toast('提现金额不能小于0');
					
					return;
					
				}
				
				if(this.openingbank.length <= 0){
					
					Toast('请输入开户行');
					
					return;
					
				}
				
				if(this.bankcard.length < 16){
					
					Toast('请输入正确的银行卡卡号');
					
					return;
					
				}
				
				let params = {
					
					openingbank:this.openingbank,
					
					bankcard:this.bankcard,
					
					number:this.number
					
				}
				
				Withdrawal(params,(res) => {
					
					// console.log(res)
					
					if(res.data.code == 1){
						
						this.$router.push('/WithdrawalList')
						
					}
					
					Toast(res.data.msg)
					
				},(error) => {
					
				})
			
			},
			
			//提现信息
			WithdrawalInfo(){
				
				let params;
				
				WithdrawalInfo(params,(res) => {
					
					// console.log(res)
					
					if(res.data.code == 1){
					
						this.WithdrawalData = res.data.data
						
						//判断是否已实名认证  如果实名则带入 银行卡 开户银行
						if(res.data.data.user.is_sh == 1){
							
							this.bankcard = res.data.data.user.sm_nums
							
							this.openingbank = res.data.data.user.sm_khhname
							
						}
						
					}
					
					
				},(error) => {
					
				})
				
			},
			
			onClickLeft() {
				// Toast('返回');
				this.$router.go(-1)

			},
			onClickRight() {
				Toast('按钮');
			},
		},
	};
</script>

<style scoped="">
	.wi_iptViews input{
		margin-left: .35rem;
	}
	
	.wi_iptViews{
		padding: .3rem 0rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: .24rem;
		border-bottom: 1px solid #F1F1F1;
	}
	
	.wd_bot{
		text-align: center;
		margin-top: .16rem;
		color: #999999;
		font-size: .24rem;
		/* margin-bottom: 1rem; */
	}
	
	.w_qr{
		margin: auto;
		width:3.8rem;
		height:.66rem;
		background:rgba(29,88,255,1);
		border-radius:.33rem;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .32rem;
		margin-top: 1.96rem;
	}
	
	.wit_left img{
		width: .87rem;
		height: .52rem;
		margin-right: .39rem;
	}
	
	.wit_view{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: .61rem;
	}
	
	.wit_left{
		font-size: .28rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.w_sxf {
		font-size: .20rem;
		color: #999;
		margin-top: .3rem;
	}

	.wi_itpView input::placeholder {
		color: rgb(241, 241, 241);
	}

	.wi_itpView input {
		width: 60%;
		font-size: .72rem;
	}

	.wi_itpView {
		border-bottom: 1px solid #F1F1F1;
		padding: .3rem .21rem .3rem 0rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #1D58FF;
		font-size: .24rem;
	}

	.wi_title {
		font-size: .32rem;
	}

	.w_itemt {
		margin-top: .17rem;
		padding: .46rem .41rem .3rem .41rem;
		box-sizing: border-box;
		background-color: white;
	}

	.w_top img {
		width: 2.1rem;
		height: 1.47rem;
		margin-bottom: .32rem;
	}


	.w_top {
		display: flex;
		flex-direction: column;
		background-color: white;
		align-items: center;
		color: #1D58FF;
		font-size: .28rem;
		padding-bottom: .56rem;
		padding-top: .48rem;
	}

	.uploadDiv input {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.uploadDiv {
		position: relative;

	}

	.su_view {
		font-size: .28rem;
		padding: 0rem 0.25rem;
		box-sizing: border-box;
	}

	.su_item {
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .25rem .25rem;
		box-sizing: border-box;
	}

	.su_item img {
		width: 1.12rem;
		height: 1.12rem;
	}

	.su_itemt {
		padding-top: .5rem;
	}

	.wd_view {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FBFBFB;
		overflow: auto;
	}
</style>
